import React, { lazy, Component } from "react";
import { withRouter } from "../../router/hooks";
import { Link } from "react-router-dom";
import "./messageItem.less";

const Swipe = lazy(() =>
  import(/* webpackChunkName:'swipe' */ "../swipe/index")
);

class MessageItem extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div className="message">
        <div className="message_content">
          <Link to={"/view?newid=" + this.props.item.newsId}>
            <div className="message_image">
              <Swipe
                slot={this.props.item.images.map((item, index) => {
                  return (
                    <div className="swipe_item" key={index}>
                      <img src={item.url} alt={item.url} />
                    </div>
                  );
                })}
                length={this.props.item.images.length}
              />
            </div>
            <header className="message_title">{this.props.item.title}</header>
            <div className="message_desc">{this.props.item.desc}</div>
            <div className="message_date">{this.props.item.createTime}</div>
            <div className="message_source">{this.props.item.source}</div>
          </Link>
        </div>
      </div>
    );
  }
}

export default withRouter(MessageItem);
